<template>
    <div class="eachart-box">
        <div id="funnel-box" style="height:100%;width:100%;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
      name: '',
      data(){
        return {
          charts: ''
        }
      },
      props: ['sevenDate', 'sevenDay'],
      mounted(){
        var that = this;
        this.$nextTick(function() {
            that.myChart = echarts.init(document.getElementById('funnel-box'));
            that.initData();
        })
      },
      methods: {
        initData(){
            const option = {
                title : {
                    text: '漏斗图'
                },
                legend: {
                    data : ['打开','参与','分享']
                },
                calculable : true,
                series : [
                    {
                        name:'漏斗图',
                        type:'funnel',
                        width: '40%',
                        data:[
                            {value:60, name:'参与'},
                            {value:30, name:'分享'},
                            {value:90, name:'打开'}
                        ]
                    }
                ]
            };
            this.myChart.setOption(option);
        }
      },
      watch: {
          sevenDate: function (){
              this.initData()
          },
          sevenDay: function (){
              this.initData()
          }
      }
    }
</script>

<style lang="less" scoped>
    .eachart-box{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
</style>
